<style>
.table-main{

}
.table-btn{
  padding: 20px;
  text-align: right;
}
.tab-table-form.iserror .is-req .el-input__inner{
  border-color: #f56c6c;
}

</style>
<template>
  <div class="tab-table-form" :class="{'iserror':iserror}">
    <el-tabs v-model="tabName" @tab-click="changeTab">
      <el-tab-pane label="基本信息" name="first"></el-tab-pane>
      <el-tab-pane v-for="m in data" :key="m.id" :label="m.name" :name="m.id">
        <div v-for="(n,mainIndex) in m.blockList" :key="n.id">
          <!--  判断是否为table-->
          <div class="table-main" v-if="n.type.indexOf('table')>=0">
            <div class="table-btn" v-if="canAdd">
              <el-button type="primary" @click="addTableRow(n)">新增</el-button>
              <el-button type="danger" :disabled="!checkedTable.length" @click="deleteTabelRow(n)">删除</el-button>
            </div>
            <el-table
              :data="n.rowList"
              border
              :show-summary="n.hasSum"
              :summary-method="getSummaries"
              @selection-change="getSelectRow"
              style="width: 100%">
              <el-table-column
                type="selection"
                width="55"
                :selectable="getRowIndex">
              </el-table-column>
              <el-table-column
                v-for="(tableCol,index) in n.colList" :key="tableCol.name" :label="tableCol.label" :prop="tableCol.name" :column-key="tableCol.sum" :width="tableCol.width">
                <template slot-scope="scope">
                  <span v-if="tableCol.isReq" style="color: red;position: absolute;left: 0;">*</span>
                  <el-input :class="{'is-req':tableCol.isReq&&!scope.row[tableCol.name]}" :maxlength="tableCol.maxLength" v-model="scope.row[tableCol.name]" v-if="!tableCol.formula" :disabled="!canAdd"></el-input>
                  <span v-else>
                    <el-popover trigger="hover" placement="top" v-if="tableCol.tip">
                      <p>公式: {{ tableCol.tip }}</p>
                      <div slot="reference" class="name-wrapper">
                        {{getFormula(tableCol,n.colList,scope.row)}}
                      </div>
                    </el-popover>
                    <span v-else>
                      {{getFormula(tableCol,n.colList,scope.row)}}
                    </span>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!--  判断是否为form表单-->
          <div class="form-main" v-if="n.type.indexOf('form')>=0">
            <el-form :model="n" label-width="100px" class="demo-ruleForm">
              <template v-for="formItem in n.fieldList">
                <el-form-item :label="formItem.label" v-if="formItem.type=='text'" :required="formItem.isReq">
                  <el-input v-model="formItem[formItem.name]" :class="{'is-req':formItem.isReq&&!formItem[formItem.name]}" :disabled="!canAdd"></el-input>
                </el-form-item>
                <el-form-item :label="formItem.label" v-if="formItem.type=='select'" :required="formItem.isReq">
                    <el-select v-model="formItem[formItem.name]" :placeholder="formItem.label" :class="{'is-req':formItem.isReq&&!formItem[formItem.name]}" :disabled="!canAdd">
                       <el-option v-for="item in formItem.options" :label="item.label" :value="item.value" :key="item.value"></el-option>
                    </el-select>
                </el-form-item>
              </template>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div style="margin-left:30px" class="el_submit" v-if="canAdd">
      <el-button type="primary" @click="submitAll" :disabled="iserror">保存</el-button>
    </div>
  </div>
</template>
<script>
  import data from './data.js'//模拟数据,具体值及参数备注在内
  export default {
    components: {
    },
    data() {
      return {
        canAdd:false,//判断页面是只查看还是可编辑
        data:data,//主数据
        tabName:'fee1',//当前选择的tab标签
        checkedTable:[]//删除时选择的列表项
      };
    },
    computed:{
      //根据data循环计算是否有必填项未填，如未填，将boder变红
      iserror(){
        let type=false;
        if(!this.canAdd){
          return type
        }
        this.data.forEach(item=>{
          item.blockList.forEach(formTable=>{
            if(formTable.type==='form'){
              type=formTable.fieldList.some(forms=>{
                return forms.isReq&&!forms[forms.name]
              })
              return;
            }
            if(formTable.type==='table'&&!type){
              type=formTable.colList.some(table=>{
                if(table.isReq){
                  type=formTable.rowList.some(rows=>{
                    return !rows[table.name]
                  })
                }
                return type;
              })
            }
          })
        })
        return type
      }
    },
    created(){

    },
    methods: {
      //切换或刷新时需要重置的值
      clearAndReset(){
        this.checkedTable=[];
      },
      //新增table列的方法
      addTableRow(data){
        let row={}
        data.colList.forEach(val=>{
          row[val.name]=''
        })
        if(!data.rowList||!data.rowList.length){
          data.rowList=[row]
        }else{
          data.rowList.push(row);
        }
      },
      //给动态列赋index值,方便删除
      getRowIndex(row,index){
        row.index=index;
        return true;
      },
      //获取选择的列
      getSelectRow(rows){
        this.checkedTable=rows.map(item=>{
          return item.index;
        }).sort();
      },
      //删除时选择的列表项
      deleteTabelRow(data){
        this.checkedTable.forEach((i,index)=>{
          data.rowList.splice(i-index,1);
        })
      },
      //根据公式计算值
      getFormula(form,row,data){
        let evaltext=form.formula;
        row.forEach(item=>{
          if(form.formula.indexOf(item.name)>=0){
            evaltext=evaltext.replace(item.name,!data[item.name]?NaN:data[item.name])
          }
        })
        let sum=eval(evaltext);
        data[form.name]=sum;
        return sum;
      },
      //获取合计行的值
      getSummaries(param) {
        const { columns,data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          let values = [];
          data.forEach(item=>{
            values.push(Number(item[column.property]));
          })
          if(column.columnKey){
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          }else{
            sums[index] = '';
          }
        });
        return sums;
      },
      //切换tab页执行
      changeTab(){
        this.clearAndReset();
      },
      //提交事件
      submitAll(){
        console.log(this.data);
      }
    }
  };
</script>
